<template>
  <ConfigProvider style="flex-grow: 1;"
    theme="light" :theme-vars="themeVars">
    <RouterView />
  </ConfigProvider>
</template>

<script setup lang="ts">
import {
  ConfigProvider,
  type ConfigProviderThemeVars,
} from 'vant';
import { RouterView } from 'vue-router';

const themeVars: ConfigProviderThemeVars = {
  navBarBackground: 'var(--van-primary-color)',
  navBarTitleTextColor: '#ffffff',
  navBarIconColor: '#ffffff',
};

</script>

<style lang="less" scoped>
// 全局样式
.app-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-width: 750px; // 设计稿最大宽度
  margin: 0 auto;

  .main-content {
    height: 100%;
    background-color: var(--van-background-2);
    flex-grow: 1;
    // -webkit-overflow-scrolling: touch; // iOS 滚动优化
  }
}

.van-nav-bar {
  position: sticky;
  top: 0;
  z-index: 99;
}

.van-tabbar {
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05);
}

.expend-main {
  margin-bottom: var(--van-tabbar-height);
}
</style>
